import React from 'react'

import { WhiteSpace, Badge, Card, SwipeAction } from 'antd-mobile'
import { ajax, isSuccess } from '../../api/ajax';

/**
 * 卡片列表
 */
export default class CardItems extends React.Component {

    getDotColor = (item) => {
        let badge;
        if (item.cardDisplayType === 'todayItems') {
            if (item.review.finished === 'true') {
                badge = <Badge dot style={{ backgroundColor: "lightgreen" }}></Badge>
            } else {
                badge = <Badge dot ></Badge>
            }
        } else {
            badge = <div></div>
        }
        return badge
    }

    toCardDetail = (id) => {
        this.props.toCardDetail(id);
    }
    deleteCard = async (id) => {
        console.log("deleteCard")
        var response = await ajax("/card/delete/" + id)
        if (isSuccess(response)) {
            this.props.refresh();
        }
    }
    delayReview = async (id) => {
        console.log("delayReview")
        var response = await ajax("/card/delay/" + id)
        if (isSuccess(response)) {
            this.props.refresh();
        }
    }

    render() {
        return this.props.items.map((item) => {
            let dotEle = this.getDotColor(item);
            return (
                <div key={item.id} >
                    <WhiteSpace />
                    <SwipeAction
                        style={{ backgroundColor: 'gray' }}
                        autoClose
                        right={[
                            {
                                text: 'Delay',
                                onPress: () => this.delayReview(item.id),
                                style: { backgroundColor: '#ddd', color: 'white' },
                            },
                            {
                                text: 'Delete',
                                onPress: () => this.deleteCard(item.id),
                                style: { backgroundColor: '#F4333C', color: 'white' },
                            },
                        ]}
                    >
                        <Card full onClick={() => this.toCardDetail(item.id)}>
                            <Card.Header
                                title={item.title}
                                extra={dotEle}
                            />
                            <Card.Body>
                                <div>{item.content} </div>
                            </Card.Body>
                            <Card.Footer content={item.planProcessing + " " + item.planName} extra={<div>{item.shouldReviewTimeDesc}</div>} />
                        </Card>
                    </SwipeAction>
                </div>

            )
        })
    }

}